<template>
    <div class="box" >
        <div class="login-left">

        </div>
        <div class="login-right">
            <h3>管理员登录系统</h3>
            <el-form :model="form" label-width="120px" class="el-form" :rules="rules" ref="ruleForm">
                <el-form-item label="" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" clearable class="input">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <UserFilled />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" type="password" clearable show-password
                        class="input">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item class="button-box">
                    <el-button class="button" :loading="loading" type="primary"  @click="submitLogin(ruleForm)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>
<script setup lang='ts'>
import { ref, reactive ,onMounted , onBeforeUnmount} from 'vue'
import { useRouter } from 'vue-router'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import type { form } from '@/config/adminInterface'
// 接口地址
import { loginApi , getInfoApi} from '@/api/admin'
// 大菠萝仓库
import { useAdminStore } from '@/store'

const adminStore = useAdminStore()
// 按钮加载状态
const loading = ref(false)
// 声明路由对象
const router = useRouter()
// 声明表单信息
const form: form = reactive({
    username: 'admin',
    password: 'admin'
})
// 拿到表单元素校验点击登录时，输入框是否为空
const ruleForm = ref<FormInstance>()
// 校验用户名函数
const validatorUsername = (rule: any, value: any, callback: any): void => {
    // 如果内容为空-提示
    if (!value) {
        callback(('用户名不能为空'))
    } 
    callback()
}
// 校验密码函数
const validatorPassword = (rule: any, value: any, callback: any): void => {
    // 如果内容为空-提示
    if (!value) {
        callback(('密码不能为空'))
    }
    callback()

}
// 表单校验
const rules = reactive({
    username: [
        {
            validator: validatorUsername,
            trigger: 'blur'
        }
    ],
    password: [
        {
            validator: validatorPassword,
            trigger: 'blur'
        }
    ]
})
// 登录验证
const submitLogin = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    loading.value = true
    setTimeout(()=>{
        loading.value = false
    },600)
    formEl.validate(async(valid) => {
        if (valid) {
            const res = await loginApi(form)
            
            if(res.status === 200){                
                loading.value = false
                window.localStorage.setItem('token',res.data.data.token)
                setTimeout(async()=>{
                    ElMessage({
                    message : '登录成功！',
                    type : 'success',
                    duration : 2000
                })
                // 登录成功后获取当前时间
                const date = new Date().getTime()
                window.localStorage.setItem('date',date + '')
                const adminInfo = await getInfoApi();
                // adminStore.adminInfo = adminInfo   
                // console.log(adminInfo);
                             
                window.localStorage.setItem('adminInfo',JSON.stringify(adminInfo.data.data))
                // 登录成功，跳转首页
                router.replace({
                    path : '/home',
                })
                },600)
            }
        } else {
            return false
        }
    })


}

// 回车登录事件-------bug
// const enterLogin = (e:Event) => {
//     e = e || window.event
//     if(((e as unknown) as { code: string }).code === 'Enter'){
//         submitLogin(ruleForm)
//     }
// }
// onMounted(()=>{
//     document.addEventListener('keyup',enterLogin)
// })

</script>
<style lang='scss' scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;

    .login-left {
        width: 1000px;
        height: 100%;
        background:url(@/../public/306422.jpg) no-repeat;
        background-position: -100px;
        background-size:cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-right {
        min-width: 500px;
        height: 100%;
        padding-top: 100px;
        .input {
            width: 250px;
        }
        h3 {
            font-size: 26px;
            font-weight: 200;
            text-align: center;
            margin-bottom: 80px;
        }
        .button {
            display: inline-block;
            width: 250px;
            height: 30px;
        }


    }

}
</style>